
<template>
  <div id="app"> 
    {{msg}} 
    <hr>
    <!-- 先关闭其他组件 -->
     <!-- <v-home></v-home> -->
     <hr>
     <!-- 在news组件中 -->
     <!-- <v-news></v-news> -->
     <!-- 非父子组件传值 -->
     <!-- <v-brother></v-brother> -->


     <!-- 6 路由跳转 -->
      <router-link to='/home'>我是路由home</router-link>
     <router-link to='/news'>我是路由news</router-link> 

     <!-- 请求数据 页面传值 -->
     <!-- <router-link to='/listnews'>我是路由listnews</router-link> -->
     <hr>
     <!-- 5--动态加载的组件显示 -->
     <router-view></router-view>
  </div>
 </template>




<script>
// Home 挂载到根组件
/* 1-引入组件 
* 2-挂载组件
*3-在模板中使用
*
*生命周期函数：
*  组件挂载以及组件更新，组件销毁的时候的触发的一系列方法---------生命周期函数
*
*
*/

import Home from './components/Home'
import News from './components/News'
import Brother from './components/BrotherData'
    export default {  
    /* 声明钩子函数 */
    mounted(){
      console.log('gou zi hanshu');
    },
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg:'hello vue'
        } 
      },
      /* 2-挂载组件 */
      components:{
        // 组件名字不可以和html标签重复
        'v-home': Home,
        // 'v-news': News
        'v-brother':Brother
      },
    
      methods:{ 
       
      }
    }
</script>





<style>
</style>
